<template>
  <a-modal
    title="平台信息"
    :width="800"
    :visible="visible"
    :confirmLoading="loading"
    @ok="
      () => {
        $emit('ok')
      }
    "
    @cancel="
      () => {
        $emit('cancel')
      }
    "
  >
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout" autocomplete="off">
        <a-row :gutter="24">
          <a-col :md="12" :sm="12">
            <a-form-item label="平台名称" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
              <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入平台名称' }] }]" name="name" placeholder="请输入" :max-length="100" />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="12">
            <a-form-item label="平台层级" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
              <a-select placeholder="请选择" v-decorator="['levelTypeDto', { rules: [{ required: true, message: '请选择平台层级' }] }]">
                <a-select-option v-for="item in levels" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="24" :sm="24">
            <a-form-item label="平台链接" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
              <a-input v-decorator="['url', { rules: [{ required: true, message: '请输入平台链接' }] }]" name="name" placeholder="请输入" :max-length="5000" />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="12">
            <a-form-item label="状态" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
              <a-select placeholder="请选择" v-decorator="['status', { rules: [{ required: true, message: '请选择状态' }] }]">
                <a-select-option :value="0">可用</a-select-option>
                <a-select-option :value="1">不可用</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="12">
            <a-form-item label="排序号" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
              <a-input-number v-model="form.sortNum" :precision="0" v-decorator="['sortNum', { rules: [{ required: true, message: '请输入排序号' }] }]" name="sortNum" placeholder="请输入" :min="0" />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="12">
            <a-form-item label="图片上传" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
              <l-table v-decorator="['fileInfoVO']" uploadType="image" :upload-arrys.sync="uploadArrys" :business-code="businessCode" editModel="1" :multiple="false" count="1" @fileArrysData="fileArrysData" />
            </a-form-item>
          </a-col>
          <a-col :md="20" :sm="20" :push="4">
            <p class="bottomText">注：只能上传一个，上传大小建议120px*120px</p>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { getTypeLabel } from '@/api/commons'
// 表单字段
const fields = ['name', 'levelTypeDto', 'url', 'status', 'sortNum', 'fileInfoVO']

export default {
  name: 'a' + Date.now(),
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data() {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      }
    }
    return {
      levels: {},
      form: this.$form.createForm(this),
      uploadArrys: [], // 附件
      businessCode: 'COMM01', // 附件
      pictureVOS: []
    }
  },
  created() {
    // 防止表单未注册
    fields.forEach((v) => this.form.getFieldDecorator(v))
    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      this.model && this.form.setFieldsValue(pick(this.model, fields))
    })
    this.getLevels()
  },
  methods: {
    getLevels() {
      getTypeLabel({ type: 7 }).then((res) => {
        if (res.code == 200) {
          this.levels = res.data
        }
      })
    },
    //文件信息
    fileArrysData(val) {
      this.form.fileInfoVO = val
    }
  }
}
</script>
<style lang="less" scoped>
.bottomText {
  transform: translate(20px,-26px);
}
</style>